import React, {Component, Fragment} from 'react';
import {Card, Form, Input, Button, message, Icon, Checkbox} from 'antd';

import './form.less';

const FormItem = Form.Item;

class FormLogin extends Component {

    state = {
        check: true
    };

    handleChangeCheckedStatus = () => {
        this.setState({
            check: !this.state.check
        });
    };

    handleSubmitClick = () => {
        let userInfo = this.props.form.getFieldsValue();
        this.props.form.validateFields((err, val) => {
            if (!err) {
                console.log(val);
                console.log(userInfo);
                message.success(
                    `${val.username}, 恭喜你，通过了本次的表单学习\n
                     你的密码为：${val.password}；  是否选中记住密码：${userInfo.remember}`
                )
            }
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Card title={'行内表单'} className={'card-content'}>
                    <Form layout={'inline'}>
                        <FormItem>
                            <Input prefix={<Icon type={'user'}/>} placeholder={'请输入用户名'} />
                        </FormItem>
                        <FormItem>
                            <Input prefix={<Icon type={'lock'}/>} placeholder={'请输入密码'} />
                        </FormItem>
                        <FormItem>
                            <Button type={'primary'}>登  录</Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title={'水平表单'} className={'card-content'}>
                    <Form style={{width:300}}>
                        <FormItem hasFeedback={true}>
                            {
                                getFieldDecorator('username', {
                                    initialValue: '',
                                    rules: [
                                        {required: true, message: '用户名不能为空！'},
                                        {min: 5, max: 16, message: '用户名长度应在5～16之内'}
                                    ]
                                })(
                                    <Input prefix={<Icon type={'user'}/>} placeholder={'请输入用户名'} />
                                )
                            }
                        </FormItem>
                        <FormItem required={true}>
                            {
                                getFieldDecorator('password', {
                                    initialValue: '',
                                    rules: [
                                        {required: true, message: '密码不能为空！'}
                                    ]
                                })(
                                    <Input prefix={<Icon type={'lock'}/>} placeholder={'请输入密码'} type={'password'} />
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('remember', {
                                    initialValue: this.state.check,
                                    rules: []
                                })(
                                    <Checkbox onChange={this.handleChangeCheckedStatus} checked={this.state.check}>记住密码</Checkbox>
                                )
                            }
                            <a href={'#/admin'} style={{float: 'right'}}>忘记密码?</a>
                        </FormItem>
                        <FormItem>
                            <Button type={'primary'}
                                    onClick={this.handleSubmitClick}
                                    style={{width: 300}}
                            >登  录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Fragment>
        );
    }
}

export default Form.create()(FormLogin);